<template>
	<div class="warpper">
		<div class="container">
			<div class="row">
				<!-- Small button groups (default and split) -->
				<div class="col-md-12">
					<div class="btn-show">
						<div class="btn-group">
							<button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="false">
								All Categories
							</button>
							<div class="dropdown-menu">
								11111
							</div>
						</div>
						<!-- 2 -->
						<div class="btn-group">
							<button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="false">
								All Countries
							</button>
							<div class="dropdown-menu">
								11111
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容 1-->
			<div class="brief-content-list">
				<div class="row content-item">
					<div class="col-md-3 col-sm-6">
						<div class="br-person-name">
							<img src="../../assets/images/avator.png" alt="">
							<span class="name">Naomi Neo</span>
						</div>
					</div>
					<div class="col-md-9 col-sm-6">
						<div class="brand-item">
							<!-- the left -->
							<div class="bl">
								<h3 class="brand">Brand Coffee-Looking for Videographer</h3>
								<div class="bl-item">
									<span>Videographers</span>
									<span>Explainer or company profile</span>
									<span><img src="../../assets/images/addr.png" class="par" alt="">Singapore</span>
								</div>
								<h3 class="idr-money">IDR 5,000,000</h3>
							</div>
							<!-- the right -->
							<div class="br">
								<div class="apply">
									Apply
								</div>
								<p class="txt-taggle" @click="isShow()">查看详情&gt;&gt;</p>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
			</div>
			<!-- 详情内容 -->
			<!-- <div class="content-detail" v-if="flag">
				213131
			</div> -->
			<contentDetail :flag="flag">
				{{f}}
			</contentDetail>
			<!-- 内容end -->
			<!-- 内容 2-->
			<div class="brief-content-list">
				<div class="row content-item">
					<div class="col-md-3 col-sm-6">
						<div class="br-person-name">
							<img src="../../assets/images/avator.png" alt="">
							<span class="name">Naomi Neo</span>
						</div>
					</div>
					<div class="col-md-9 col-sm-6">
						<div class="brand-item">
							<!-- the left -->
							<div class="bl">
								<h3 class="brand">Brand Coffee-Looking for Videographer</h3>
								<div class="bl-item">
									<span>Videographers</span>
									<span>Explainer or company profile</span>
									<span><img src="../../assets/images/addr.png" class="par" alt="">Singapore</span>
								</div>
								<h3 class="idr-money">IDR 5,000,000</h3>
							</div>
							<!-- the right -->
							<div class="br">
								<div class="apply">
									Apply
								</div>
								<p class="txt-taggle">查看详情&gt;&gt;</p>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
			</div>
			<!-- 内容end -->
			<!-- 内容 3-->
			<div class="brief-content-list">
				<div class="row content-item">
					<div class="col-md-3 col-sm-6">
						<div class="br-person-name">
							<img src="../../assets/images/avator.png" alt="">
							<span class="name">Naomi Neo</span>
						</div>
					</div>
					<div class="col-md-9 col-sm-6">
						<div class="brand-item">
							<!-- the left -->
							<div class="bl">
								<h3 class="brand">Brand Coffee-Looking for Videographer</h3>
								<div class="bl-item">
									<span>Videographers</span>
									<span>Explainer or company profile</span>
									<span><img src="../../assets/images/addr.png" class="par" alt="">Singapore</span>
								</div>
								<h3 class="idr-money">IDR 5,000,000</h3>
							</div>
							<!-- the right -->
							<div class="br">
								<div class="apply">
									Apply
								</div>
								<p class="txt-taggle">查看详情&gt;&gt;</p>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
			</div>
			<!-- 内容end -->
			<!-- 内容 4-->
			<div class="brief-content-list">
				<div class="row content-item">
					<div class="col-md-3 col-sm-6">
						<div class="br-person-name">
							<img src="../../assets/images/avator.png" alt="">
							<span class="name">Naomi Neo</span>
						</div>
					</div>
					<div class="col-md-9 col-sm-6">
						<div class="brand-item">
							<!-- the left -->
							<div class="bl">
								<h3 class="brand">Brand Coffee-Looking for Videographer</h3>
								<div class="bl-item">
									<span>Videographers</span>
									<span>Explainer or company profile</span>
									<span><img src="../../assets/images/addr.png" class="par" alt="">Singapore</span>
								</div>
								<h3 class="idr-money">IDR 5,000,000</h3>
							</div>
							<!-- the right -->
							<div class="br">
								<div class="apply">
									Apply
								</div>
								<p class="txt-taggle">查看详情&gt;&gt;</p>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
			</div>
			<!-- 内容end -->
		</div>
	</div>
</template>

<script>
	import contentDetail from '@/components/brief/contentDetail.vue'
	export default {
		data() {
			return {
				flag: false,
				f:"nihao"
			}
		},
		methods:{
			isShow(){
				console.log(12)
				this.flag = !this.flag;
			}
		},
		components:{
			contentDetail
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.bl .brand{
		font-size: 21px;
	}
	.par{
		padding-right: 5px;
	}
	.warpper {
		width: 100%;
		background-color: #fff;
		height: auto;
		padding-bottom: 150px;
	}

	.content-item {
		padding: 30px;
		background-color: #F7F7F7;
		border-radius: 4px;
		height: 192px;
		margin-bottom: 20px;
		position: relative;
	}

	.content-item::after {
		content: '';
		position: absolute;
		top: 15px;
		left: 260px;
		height: 85%;
		width: 1px;
		background-color: lightgray;
	}
	
	.br-person-name {
		height: 100%;
		display: flex;
		align-items: center;
		>img{
			display: block;
			height: 56px;
			width: 56px;
		}
		.name {
			padding-left: 10px;
			font-size: 18px;
			font-weight: bold;
		}
	}


	.brand-item {
		display: flex;
		justify-content: space-between;

		h3 {
			font-weight: bold;
			color: #4D4D4D;
		}
	}

	.bl-item span {
		display: inline-block;
		margin: 10px 10px 10px 0;
		padding: 0px 20px;
		background-color: #fff;
		height: 36px;
		border: 2px solid #E6E6E6;
		border-radius: 36px;
		line-height: 34px;
		font-size: 14px;
		vertical-align: middle;
	}
	
	.brand-item .br .apply {
		background-color: #F15E45;
		width: 87px;
		height: 39.583px;
		text-align: center;
		line-height: 39.583px;
		border-radius: 4px;
		color: #fff;
		font-weight: 400;
	}

	.brand-item .br .txt-taggle {
		margin-top: 70px;
		color: #F15E45;
		cursor: pointer;
	}

	.idr-money {
		margin-top: 10px;
		font-size: 18px;
	}
	
	@media screen and (max-width:750px) {
		.bl-item span{
			display: none;
		}
		.brand-item .br .txt-taggle {
			margin-top: 20px;
		}
		.content-item::after {
			left: 95%;
	}
	}
	
	@media screen and (min-width:750px) and (max-width:992px){
		.content-item::after {
			left: 98%;
	}
	}
</style>
